/*
 * @Description: 
 * @Author: 葛玉根
 * @Date: 2021-02-26 20:14:24
 * @LastEditTime: 2021-02-27 00:07:23
 * @LastEditors: Zhang Zhaoda
 */
import React,{FC, ReactNode,useEffect,useRef,useState} from 'react'
interface Iprops{
    children: ReactNode,
    Data:any
}
const Loazing: FC<Iprops> = function (props) {
    let [clineHeight, setClineHeight] = useState<number>(0)
    let scrollBox = useRef<HTMLDivElement>(null)
    // let imgs: HTMLImageElement[] = []
    let imgs: any=[]
    const scroll = () => {
        imgs.forEach((img:any) => {
            if (((scrollBox.current as HTMLDivElement).scrollTop + clineHeight)>img.offsetTop) {
                let dataSrc: string = img.getAttribute('data-src') as string
                img.setAttribute("src",dataSrc)
                console.log(img.src);
            }
        })
        
    }
    useEffect(() => {
        let Height = (scrollBox.current as HTMLDivElement).clientHeight
        setClineHeight(Height)
        
    }, [])
    useEffect(() => {
        (scrollBox.current as HTMLDivElement).addEventListener('scroll', scroll)
        imgs = (scrollBox.current as HTMLDivElement).querySelectorAll("img")
        // console.log(imgs);
        
        scroll();
    }, [props.Data])
    
    return (
        <div
         ref={scrollBox}
         >
            {props.children}
        </div>
    )
}
export default Loazing